<template>

  <div class="home">

    <div class="stepBox">
      <el-steps :active="active" finish-status="success" simple
                style=" margin: 50px 30px 30px;padding:  20px  ; border-radius: 50px">
        <el-step title="选择题库"></el-step>
        <el-step title="选择科目"></el-step>
        <el-step title="选择题数"></el-step>
        <el-step title="提交考试"></el-step>
        <el-step title="考试结果"></el-step>
      </el-steps>
    </div>

    <!--      第一步-->
    <div class="content" v-if="active===0">
      选择驾照类型：
      <el-select v-model="carType" placeholder="请选择">
        <el-option
            v-for="item in carOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <br>
      <el-image
          style=" width: 150px; height: 150px;margin-top: 70px;"
          :src="require(`../assets/${carType?carType :0}.png`)" fit="fit" >
      </el-image>

    </div>

    <!--      第二步-->
    <div class="content" v-else-if="active===1">
      <el-form ref="form" size="medium" style="margin: 0 auto ;width: 40vw;font-size: 30px">
        <el-form-item label="请选择考试科目">
          <el-radio-group v-model="examType">
            <el-radio :label="0">科目一</el-radio>
            <el-radio :label="1">科目四</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>

    <!--      第三步-->
    <div class="content" v-else-if="active===2" >
      选择考题数量：
      <el-input-number v-model="num" :min="1" :max="100" label="考题数量" ></el-input-number>
    </div>

    <!--      第四步-->
    <div class="content" v-else-if="active===3 &&driverQuestionList.length>=1"  >
      <div class="type1"  v-if="driverQuestionList[index].questionType==1 &&updates ">


        <div class="indexInfo">当前第{{ index + 1 }}题，共{{ driverQuestionList.length }}题</div>
        <div class="questionBox">
          <div class="questionTypeBox">
            <span class="questionType">判断题</span>
          </div>
          <div class="question">{{ driverQuestionList[index].question }}</div>
        </div>
        <div class="option" @click="update($event.target)">
          <div class="optionItem" :class="[{selects:this.class('optionA')}]" data-option="optionA" :key="driverQuestionList[index].questionID+'A'">
            {{ driverQuestionList[index].optionA }}
          </div>

          <div class="optionItem" :class="[{selects:this.class('optionB')}]" data-option="optionB" :key="driverQuestionList[index].questionID+'B'">
            {{ driverQuestionList[index].optionB }}
          </div>
        </div>
      </div>


      <div class="type1" v-if="driverQuestionList[index].questionType==2 &&updates" >
        <img v-if="driverQuestionList[index].imageURL" :src="driverQuestionList[index].imageURL" alt="假装有图片"/>
        <div class="indexInfo">当前第{{ index + 1 }}题，共{{ driverQuestionList.length }}题</div>
        <div class="questionBox">
          <div class="questionTypeBox">
            <span class="questionType">单选题</span>
          </div>
          <div class="question">{{ driverQuestionList[index].question }}</div>
        </div>

        <div class="option" style="flex-direction: column" @click="update($event.target)">
          <div class="optionItem" :class="[{selects:this.class('optionA')}]" data-option="optionA" :key="driverQuestionList[index].questionID+'A'">
            A、{{ driverQuestionList[index].optionA }}
          </div>
          <div class="optionItem" :class="[{selects:this.class('optionB')}]" data-option="optionB" :key="driverQuestionList[index].questionID+'B'">
            B、{{ driverQuestionList[index].optionB }}
          </div>
          <div class="optionItem" :class="[{selects:this.class('optionC')}]" data-option="optionC" :key="driverQuestionList[index].questionID+'C'">
            C、{{ driverQuestionList[index].optionC }}
          </div>
          <div class="optionItem" :class="[{selects:this.class('optionD')}]" data-option="optionD" :key="driverQuestionList[index].questionID+'D'">
            D、{{ driverQuestionList[index].optionD }}
          </div>

        </div>


      </div>

      <div class="type1" v-if="driverQuestionList[index].questionType==3 &&updates ">

        <div class="indexInfo">当前第{{ index + 1 }}题，共{{ driverQuestionList.length }}题</div>
        <div class="questionBox">
          <div class="questionTypeBox">
            <span class="questionType">多选题</span>
          </div>
          <div class="question">{{ driverQuestionList[index].question }}</div>
        </div>

        <div class="option" style="flex-direction: column" @click="update($event.target)" >
          <div class="optionItem" :class="[{selects:this.class('optionA')}]" data-option="optionA" :key="driverQuestionList[index].questionID+'A'">
            A、{{ driverQuestionList[index].optionA }}
          </div>
          <div class="optionItem" :class="[{selects:this.class('optionB')}]" data-option="optionB" :key="driverQuestionList[index].questionID+'B'">
            B、{{ driverQuestionList[index].optionB }}
          </div>
          <div class="optionItem" :class="[{selects:this.class('optionC')}]" data-option="optionC" :key="driverQuestionList[index].questionID+'C'">
            C、{{ driverQuestionList[index].optionC }}
          </div>
          <div class="optionItem" :class="[{selects:this.class('optionD')}]" data-option="optionD" :key="driverQuestionList[index].questionID+'D'">
            D、{{ driverQuestionList[index].optionD }}
          </div>

        </div>


      </div>


      <div class="questionBtnBox">
        <el-button type="primary" v-if=" index !==0 " @click=" index=index-1">上一题</el-button>
        <el-button @click="dialogVisible=true" v-if="this.driverQuestionList.length>2">选题</el-button>
        <el-button   type="primary" v-if=" index+1 !== this.driverQuestionList.length" @click="index=index+1">下一题
        </el-button>
      </div>
      <el-dialog
          title="选题"
          :visible.sync="dialogVisible"
          top="40vh"
          width="40vw"
          >
        <div class="listIndex" style="display: flex;flex-wrap: wrap">
          <span  @click="index = Index ;dialogVisible=false" v-for="(item,Index) in driverQuestionList.length" :key="item">{{Index+1}}</span>
        </div>

        <span slot="footer" class="dialog-footer"></span>
      </el-dialog>
    </div>

    <!--      第五步-->
    <div class="content" v-else-if="active===4">

      <el-image
          style="width: 300px; height: 200px"
          :src="require('../../src/assets/wait.png')"
          fit="scale-down"
          >
      </el-image>
      <div style="font-size: 20px">稍等片刻...</div>
    </div>

    <!--      考试结果-->
    <div class="content" v-else-if="active===5&&analyze">
      <div class="end">
        <span style=" font-weight: bolder;">{{carOptions[carType].label}}</span>
        <span>{{examType=== 0 ? '科目一' :'科目四'}}</span>
        <span>共{{num}}题</span>
        <span>答对：{{correct}}题，答错：{{driverQuestionList.length-correct}}题</span>
        <span>正确率：{{((correct/(driverQuestionList.length)).toFixed(2))*100}}%</span>
      </div>
    </div>
    <div class="analyze" v-else>
      <div class="type1"  v-if="driverQuestionList[index].questionType==1 &&updates ">


        <div class="indexInfo">当前第{{ index + 1 }}题，共{{ driverQuestionList.length }}题</div>
        <div class="questionBox">
          <div class="questionTypeBox">
            <span class="questionType">判断题</span>
          </div>
          <div class="question">{{ driverQuestionList[index].question }}</div>
        </div>
        <div class="option">
          <div class="optionItem" :class="[{selects:this.class('optionA')},{error:this.classed('optionA')}]" data-option="optionA" :key="driverQuestionList[index].questionID+'A'">
            {{ driverQuestionList[index].optionA }}
          </div>

          <div class="optionItem" :class="[{selects:this.class('optionB')},{error:this.classed('optionB')}]" data-option="optionB" :key="driverQuestionList[index].questionID+'B'">
            {{ driverQuestionList[index].optionB }}
          </div>
        </div>
        <div class="jiexi">
          解析：
          <br>
          答案：{{driverQuestionList[index].key}}
          <br>
          {{driverQuestionList[index].explains}}
        </div>

      </div>


      <div class="type1" v-if="driverQuestionList[index].questionType==2 &&updates" >
        <img v-if="driverQuestionList[index].imageURL" :src="driverQuestionList[index].imageURL" alt="假装有图片"/>
        <div class="indexInfo">当前第{{ index + 1 }}题，共{{ driverQuestionList.length }}题</div>
        <div class="questionBox">
          <div class="questionTypeBox">
            <span class="questionType">单选题</span>
          </div>
          <div class="question">{{ driverQuestionList[index].question }}</div>
        </div>

        <div class="option" style="flex-direction: column">
          <div class="optionItem" :class="[{selects:this.class('optionA')},{error:this.classed('optionA')}]" data-option="optionA" :key="driverQuestionList[index].questionID+'A'">
            A、{{ driverQuestionList[index].optionA }}
          </div>
          <div class="optionItem" :class="[{selects:this.class('optionB')},{error:this.classed('optionB')}]" data-option="optionB" :key="driverQuestionList[index].questionID+'B'">
            B、{{ driverQuestionList[index].optionB }}
          </div>
          <div class="optionItem" :class="[{selects:this.class('optionC')},{error:this.classed('optionC')}]" data-option="optionC" :key="driverQuestionList[index].questionID+'C'">
            C、{{ driverQuestionList[index].optionC }}
          </div>
          <div class="optionItem" :class="[{selects:this.class('optionD')},{error:this.classed('optionD')}]" data-option="optionD" :key="driverQuestionList[index].questionID+'D'">
            D、{{ driverQuestionList[index].optionD }}
          </div>

        </div>

        <div class="jiexi">
          解析：
          <br>
          答案：{{driverQuestionList[index].key}}
          <br>
          {{driverQuestionList[index].explains}}
        </div>


      </div>

      <div class="type1" v-if="driverQuestionList[index].questionType==3 &&updates ">

        <div class="indexInfo">当前第{{ index + 1 }}题，共{{ driverQuestionList.length }}题</div>
        <div class="questionBox">
          <div class="questionTypeBox">
            <span class="questionType">多选题</span>
          </div>
          <div class="question">{{ driverQuestionList[index].question }}</div>
        </div>

        <div class="option" style="flex-direction: column" >
          <div class="optionItem" :class="[{selects:this.class('optionA')},{error:this.classed('optionA')}]" data-option="optionA" :key="driverQuestionList[index].questionID+'A'">
            A、{{ driverQuestionList[index].optionA }}
          </div>
          <div class="optionItem" :class="[{selects:this.class('optionB')},{error:this.classed('optionB')}]" data-option="optionB" :key="driverQuestionList[index].questionID+'B'">
            B、{{ driverQuestionList[index].optionB }}
          </div>
          <div class="optionItem" :class="[{selects:this.class('optionC')},{error:this.classed('optionC')}]" data-option="optionC" :key="driverQuestionList[index].questionID+'C'">
            C、{{ driverQuestionList[index].optionC }}
          </div>
          <div class="optionItem" :class="[{selects:this.class('optionD')},{error:this.classed('optionD')}]" data-option="optionD" :key="driverQuestionList[index].questionID+'D'">
            D、{{ driverQuestionList[index].optionD }}
          </div>
          <div class="jiexi">
            解析：
            <br>
            答案：{{driverQuestionList[index].key}}
            <br>
            {{driverQuestionList[index].explains}}
          </div>

        </div>


      </div>


      <div class="questionBtnBox">
        <el-button type="primary" v-if=" index !==0 " @click=" index=index-1">上一题</el-button>
        <el-button @click="dialogVisible=true" v-if="this.driverQuestionList.length>2">选题</el-button>
        <el-button   type="primary" v-if=" index+1 !== this.driverQuestionList.length" @click="index=index+1">下一题
        </el-button>
      </div>
      <el-dialog
          title="选题"
          :visible.sync="dialogVisible"
          top="40vh"
          width="40vw"
      >
        <div class="listIndex" style="display: flex;flex-wrap: wrap">
          <span  @click="index = Index ;dialogVisible=false" v-for="(item,Index) in driverQuestionList.length" :key="item">{{Index+1}}</span>
        </div>

        <span slot="footer" class="dialog-footer"></span>
      </el-dialog>

    </div>
    <div class="btn" style="margin:20px 0 50px;">
      <el-button style="margin-bottom: 20px;" @click="pre" v-if="active>0&&active!==4"> {{
          active === 3 ? '重新选择考试' : (active === 5 ? '再考一次' : '上一步')
        }} </el-button>
      <el-button type="primary" v-if="active!==4&&isBtn" @click="next">{{ active === 2 ? '开始考试' : (active === 3 ? '交卷' : (active === 5 ? '查看解析' : '下一步')) }}</el-button>
    </div>
  </div>

</template>

<script>
import {questionList} from '@/api/api'

export default {
  name: 'Home',
  data() {
    return {
      isBtn:true,
      analyze:true,
      correct:0,
      dialogVisible:false,
      fullscreenLoading:false,
      updates: true,
      form: {},
      index: 0,
      active: 0,
      carType: '',
      num: '',
      examType: '',
      carOptions: [{value: 0, label: '小车（C1、C2）'}, {value: 1, label: '客车（A1、A3、B1）'}, {
        value: 2,
        label: '货车（A2、B2）'
      }, {value: 3, label: '摩托车（D、E、F）'}],
      driverQuestionList: []
    }
  },
  created() {

  },

  methods: {
    classed(option){
      if (this.active==5){
        let l = this.driverQuestionList[this.index].mineAnswer
        let key = this.driverQuestionList[this.index].key
        if (option === 'optionA'){
          l = l.filter((item)=>{
            return item == "A" || item == "正确";
          })
          key = key.filter((item)=>{
            return item == "A" || item == "正确"
          })
          return l!=l.length && !(key!=key.length)
        }else if(option === 'optionB'){
          l = l.filter((item)=>{
            return item == "B" || item == "错误";
          })
          key = key.filter((item)=>{
            return item == "B" || item == "错误";
          })
          return l!=l.length && !(key!=key.length)
        }else if(option === 'optionC'){
          l = l.filter((item)=>{
            return item == "C"
          })
          key = key.filter((item)=>{
            return item == "C"
          })
          return l!=l.length && !(key!=key.length)
        }else if(option === 'optionD') {
          l = l.filter((item)=>{
            return item == "D"
          })
          key = key.filter((item)=>{
            return item == "D"
          })
          return l!=l.length && !(key!=key.length)
        }
      }
      // console.log(option)

      return 0
    },
    class(option){
      if (this.driverQuestionList[this.index].mineAnswer != 0){
        let l = this.driverQuestionList[this.index].mineAnswer
        console.log(this.driverQuestionList[this.index].mineAnswer,this.driverQuestionList[this.index].mineAnswer instanceof Array)
        if (option === 'optionA'){
          l = l.filter((item)=>{
            return item == "A" || item == "正确";
          })
          return l!=l.length
        }else if(option === 'optionB'){
          l = l.filter((item)=>{
            return item == "B" || item == "错误";
          })
          return l!=l.length
        }else if(option === 'optionC'){
          l = l.filter((item)=>{
            return item == "C"
          })
          return l!=l.length
        }else if(option === 'optionD') {
          l = l.filter((item)=>{
            return item == "D"
          })
          return l!=l.length
        }
      }
      console.log(option)

      return 0
    },
    update(a) {
      // console.log(a)
      // console.log(a.dataset.option,this.driverQuestionList[this.index].questionType)
      // a.classList.add("advv")
      // console.log(a.className,a.dataset.option,this.driverQuestionList[this.index].questionType)
      // a.classList.remove("advv")
      // console.log(a.className,a.dataset.option,this.driverQuestionList[this.index].questionType)
      // a.className = ''
      // console.log(a.className,a.dataset.option,this.driverQuestionList[this.index].questionType)

      // //判断题
      if(this.driverQuestionList[this.index].questionType==1&&(a.dataset.option==='optionA'||a.dataset.option==='optionB'||a.dataset.option==='optionC'||a.dataset.option==='optionD')){
        // console.log(11)
        let p = a.parentNode.children
        for (let i = 0 ,pl = p.length; i < pl ; i++){
          p[i].className = 'optionItem'
        }


          a.classList.add("selects")

        if (a.dataset.option === 'optionA'){
          this.driverQuestionList[this.index].mineAnswer = ["正确"]
        }else {
          this.driverQuestionList[this.index].mineAnswer = ["错误"]
        }
        console.log(this.driverQuestionList[this.index].mineAnswer,this.driverQuestionList[this.index].mineAnswer instanceof Array)


      }
      // 单选题
      if(this.driverQuestionList[this.index].questionType==2&&(a.dataset.option==='optionA'||a.dataset.option==='optionB'||a.dataset.option==='optionC'||a.dataset.option==='optionD')){
        let p = a.parentNode.children
        for (let i = 0 ,pl = p.length; i < pl ; i++){
          p[i].className = 'optionItem'
        }

        if(a.dataset.option){
          a.classList.add("selects")
        }
        if (a.dataset.option === 'optionA'){
          this.driverQuestionList[this.index].mineAnswer = ["A"]
        }else if(a.dataset.option === 'optionB'){
          this.driverQuestionList[this.index].mineAnswer = ["B"]
        }else if(a.dataset.option === 'optionC'){
          this.driverQuestionList[this.index].mineAnswer = ["C"]
        }else {
          this.driverQuestionList[this.index].mineAnswer = ["D"]
        }
        console.log(this.driverQuestionList[this.index].mineAnswer,this.driverQuestionList[this.index].mineAnswer instanceof Array)

      }
      //多选题
      if(this.driverQuestionList[this.index].questionType == 3&&(a.dataset.option==='optionA'||a.dataset.option==='optionB'||a.dataset.option==='optionC'||a.dataset.option==='optionD')){

        if(a.className==="optionItem selects"){
          console.log(1111)
          a.className="optionItem"
          let l = this.driverQuestionList[this.index].mineAnswer
          console.log(this.driverQuestionList[this.index].mineAnswer,this.driverQuestionList[this.index].mineAnswer instanceof Array)

          if (a.dataset.option === 'optionA'){
            this.driverQuestionList[this.index].mineAnswer = l.filter(function(item){

              return item != "A";
            });
          }else if(a.dataset.option === 'optionB'){
            this.driverQuestionList[this.index].mineAnswer = l.filter(function(item){
              return item != "B";
            });
          }else if(a.dataset.option === 'optionC'){
            this.driverQuestionList[this.index].mineAnswer = l.filter(function(item){
              return item != "C";
            });
          }else {
            this.driverQuestionList[this.index].mineAnswer = l.filter(function(item){
              return item != "D";
            });
          }
        }else {
          a.classList.add("selects")
          if (a.dataset.option === 'optionA'){
            this.driverQuestionList[this.index].mineAnswer.push("A")
          }else if(a.dataset.option === 'optionB'){
            this.driverQuestionList[this.index].mineAnswer.push("B")
          }else if(a.dataset.option === 'optionC'){
            this.driverQuestionList[this.index].mineAnswer.push("C")
          }else {
            this.driverQuestionList[this.index].mineAnswer.push("D")
          }

        }
      }
      this.$forceUpdate()
      this.updates = false
      this.updates = true
    },
    questionList() {

      let data = {
        apiKey: 'WAbnB1za247b2c8b5fcc95a660399b80a4d8b813d901a1e',
        pageSize: this.num,
        licenseType: this.carType,
        subjectType: this.examType
      }
      questionList(data).then(res =>{
        this.index = 0
        this.driverQuestionList = res.data.result.driverQuestionList
        // this.sss()
        // this.driverQuestionList = res.data.result.driverQuestionList.map((item) => {
        //   res.data.result.driverQuestionList.push(
        //       Object.assign(item,{mineAnswer:''})
        //   )
        // })
        // this.fullscreenLoading=false
        this.$store.commit('getLoading',false)
        this.driverQuestionList = res.data.result.driverQuestionList.map((item) => {
          return Object.assign(item,{mineAnswer:''})
        })

        // this.active++
      })
    },
    sss(){
      this.index = 0
      const isArrEqual = (arr1, arr2) => {
        return arr1.length === arr2.length && arr1.every((ele) => arr2.includes(ele));
      };
      for (let i = 0; i < this.driverQuestionList.length ; i++){
        if(this.driverQuestionList[i].questionType === '1'){
          this.driverQuestionList[i].key = [this.driverQuestionList[i].key]
        }else {
          this.driverQuestionList[i].key = [...this.driverQuestionList[i].key]
        }

        if (isArrEqual(this.driverQuestionList[i].key,this.driverQuestionList[i].mineAnswer)){
          this.correct++
        }
      }
      // 开始多此一举vuex了
      this.$store.commit('setTitle',this.carOptions[this.carType].label)
      this.$store.commit('setType',this.examType ===0 ?'科目一':'科目四')
      this.$store.commit('setNums',this.num)
      this.$store.commit('setCorrect',this.correct)
      if (this.correct==0){

        this.$store.commit('Percentage', '0%')
      }else {

      this.$store.commit('Percentage',( (this.correct/(this.driverQuestionList.length)).toFixed(2))*100+'%')
      }

    //  储存到本地
      let data = {
        title:this.$store.state.title,
        type:this.$store.state.type,
        nums:this.$store.state.nums,
        correct:this.$store.state.correct,
        percentage:this.$store.state.percentage
      }
      if (localStorage.getItem('history')!=null){
        let arry = JSON.parse(localStorage.getItem('history'))
        arry.unshift(data)
        localStorage.setItem('history',JSON.stringify(arry))
      }else {
        data = [data]
        localStorage.setItem('history',JSON.stringify(data))
      }
      this.$store.commit('getList',JSON.parse(localStorage.getItem('history')))
    },
    next(){
      if (this.carType === '') {
        return this.$message({
          message: '请选择驾照类型',
          type: 'error'
        });
      }
      if (this.examType === '' && this.active == 1) {
        return this.$message({
          message: '请选择科目类型',
          type: 'error'
        });
      }
      if( this.active===2){
        this.$store.commit('getLoading',true)
         this.questionList()

      }
      if( this.active===3){
        this.sss()
        setTimeout(()=>{
          this.active++
        },1000)
      }
      if( this.active===5){
      //  查看解析
        this.isBtn=true
       return  this.analyze=false

      }
      this.active++
    },
    pre() {
      if (this.active==3||this.active==5){
        this.isBtn=true
        this.index=0
        this.carType= ''
        this.num= ''
        this.examType= ''

        this.$store.commit('setTitle','')
        this.$store.commit('setType','')
        this.$store.commit('setNums','')
        this.$store.commit('setCorrect','')
        return this.active =0
      }
      this.active--
    }
  }
}
</script>
<style scoped>


.jiexi{
  width: 40vw ;
  background-color: #eeeeee;
  padding: 20px;border-radius: 10px;
  margin: 20px  auto 0;
  text-align: left;
  box-shadow: 0 0 5px gray inset ;
}
.home {
  background-color: white;
  width: 80vw;
  min-height: 80vh;
  margin: 20px auto 0;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.stepBox {
  border-radius: 5px;
  overflow: hidden;
  /*width: 60%*/
}

.content {
  margin-top: 50px;
  flex: 1;
  position: relative;
}

.indexInfo {
  margin: 15px auto 20px auto;
  width: 50%;
  color: darkgrey;
  text-align: left
}

.questionBox {
  display: flex;
  align-items: start;
  justify-content: center;
  width: 70%;
  margin: 0 auto 50px;
}

.question {
  line-height: 30px;
  display: inline-block;
  text-align: left;
}

.questionTypeBox {
  /*width: 150px;*/
  display: flex;

}

.questionBtnBox {
  margin-top: 80px;
}

.questionType {
  width: 50px;
  color: white;
  padding: 5px;
  margin-right: 20px;
  background-color: #409eff;
  border-radius: 5px;
}

.option {
  display: flex;
  width: 30vw;
  margin: auto;

  justify-content: space-between;
}

.optionItem {
  cursor: pointer;

  padding: 5px 10px;
  border-radius: 5px;
  margin: 10px;
  text-align: left;
  flex: 1;
  flex-wrap: wrap;
  box-shadow: 0 0 5px 0 #d9d9d9;
}
.optionItem:hover{
  /*background-color: #ecf5ff;*/
  box-shadow: 0 0 5px 0 #7ab2f6;
}
.selects{
  background-color: #ecf5ff;
}
.error{
  background-color: #ffecec;

}
.noselects{
  background-color: #ecf5ff;
}
.listIndex span{
  padding: 10px;
  width: 25px;
  margin: 15px;
  border-radius: 5px;
  border: 1px slategrey solid;

}
.listIndex span:hover{
  background-color: #e2e8f6;
  cursor: pointer;
}
.end{
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 18px;
}
.end span{
  margin-bottom: 20px;
}
</style>
